<script setup lang="ts">
import { CloseBold } from "@element-plus/icons-vue";
import { getCurrentWindow } from "@tauri-apps/api/window";

const onClose = async () => {
  getCurrentWindow().close();
};
</script>

<template>
  <div class="nav-bar">
    <div class="logo horzontal-center-layout"> 电商登录 v0.0.1</div>
    <span class="flex-1"></span>
    <div class="sys-btn-bar">
      <div class="nav-btn" @click="onClose">
        <el-icon style="width: 16px;height: 16px;">
          <CloseBold />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.nav-bar {
  -webkit-app-region: drag;
  display: flex;
  width: 100%;
  height: 30px;
  line-height: 30px;
  box-sizing: content-box;
  .sys-btn-bar {
    -webkit-app-region: no-drag;
  }
  .logo {
    padding-left: 10px;
  }
  .nav-btn {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    padding: 0px 8px;
    font-weight: normal;
    color: rgb(56, 53, 53);
    &:hover {
      color: red;
    }
  }

}
</style>